<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>index</title>
</head>
<body>
<div id="app">
  <p>计算属性: {{hellomessage}} </p>

  <input type="text" v-model="firstName">
  <input type="text" v-model="lastName">
  <span>{{fullName}}</span>
  <input type="text" v-model="fullName">

</div>
<script src="vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'hello',
      firstName: 'bie',
      lastName: 'ge'
    },
    computed: {
      hellomessage() {  // 之前这种直接写方法体的方式,是默认的getter方法
        console.log('嘿嘿嘿')
        return this.message.split('').reverse().join('')
      },
      fullName: {  // 计算属性的完整写法,注意是 : 不是 ()
        get() {
          console.log('计算全名')
          return this.firstName + ' ' + this.lastName
        },
        set(value) {
          const fnames = value.split(' ')
          this.firstName = fnames[0]
          this.lastName = fnames[1]
        }
      }
    }
  })
</script>
</body>
</html>